import { Component } from "react";
import MyContext from "./MyContext"
// 提宫数据
export default class MyPrivider extends Component {
  state = {
    msgList: [
      { id: 1, msg: '大家下午好。' },
      { id: 2, msg: '大家下午好。too' },
    ]
  }
  constructor() {
    super()
    this.addMsg = this.addMsg.bind(this)
  }

  addMsg(v) {
    this.setState(
      {
        msgList: [...this.state.msgList, { id: this.state.msgList.length + 1, msg: v }]
      }
    )
  }

  render() {
    return (
      //  Provider 可以将当前指定的数据的状态，提供给以下的组件树。无论后代组件有多深，都可以使用Provider提供的数据
      // Provider必须是一个外层组件
      // value属性，提供的数据
      <MyContext.Provider
        value={
          {
            list: this.state.msgList,
            addMsg: this.addMsg
          }
        }
      >
        {this.props.children}
        {/* MsgBox组件 */}
        {/* children,在调用当前组件（MyProvider）时，它的默认的Props,把它做 <MyContext.Provider>组件的后代组件 */}
      </MyContext.Provider>
    )
  }
}